<template>
    <div class="myorder-root">
        <div class="order-items" v-for="o in order">
            <div class="t-p">
               <router-link :to="{path:'/hunter/dingdan/myorder/msg',query:{nowTime:o.nowTime}}">
                   <div class="info">
                        <div class="msg">
                            <h2>{{o.title}}</h2>
                            <p class="money">应付<span>￥</span>{{o.price}}</p>
                        </div>
                        <span class="pay" v-show="o.pasted">待支付</span>
                        <span class="pay cancel" v-show="!o.pasted">已取消</span>
                   </div>
                <div class="time">{{o.date}}</div>
               </router-link>   
            </div>
          
            <div class="bottom" v-show="o.pasted">
               立即支付
            </div>
            
        </div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                order: '',
            }
        },
        mounted: function() {
            this.$store.dispatch("queAllOrder")
                .then(res => {
                    this.order = res.data.data.map((e) => {
                        e.pasted = this.isPasted(e.nowTime);
                        return e;
                    });
                })
        },
        methods: {
            isPasted: function(t) {
                var nowTime = new Date().getTime();
                var past = nowTime * 1 - t;
                return (past / 1000) < 600;
            }
        }
    }
</script>

<style scoped>
    .myorder-root {
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        overflow: scroll;
    }
    
    .order-items {
        height: 220px;
        padding-top: 20px;
    }
    
    .t-p {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 70%;
        padding: 10px;
    }
    
    .info {
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    
    .msg {
        width: 100%;
    }
    
    .pay {
        position: absolute;
        right: -10px;
        top: 0;
        color: white;
        background-color: #F36700;
        padding: 6px 10px;
        font-size: 13px;
        border-radius: 8%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    p,
    h2 {
        margin: 0;
    }
    
    h2 {
        font-weight: 100;
        font-size: 16px;
    }
    
    .money {
        margin-top: 10px;
        color: #999;
        font-size: 13px;
    }
    
    .time {
        margin-top: 20px;
        color: #999;
    }
    
    .bottom {
        padding: 20px 0;
        border: 1px solid #f1f1f1;
        /*display: flex;*/
        /*align-items: center;*/
        color: #F36700;
        text-align: center;
    }
    
    .cancel {
        background-color: #aaa;
    }
</style>